/* 
	该文件用于：
			1.向外部提供一个路由器
			2.指定路由规则
*/
//引入Vue
import Vue from 'vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
//应用VueRouter这个插件
Vue.use(VueRouter)

//创建一个路由器
const router = new VueRouter({
	//指定工作模式，两种选择：history（推荐，兼容性稍差）、hash（兼容性好，不美观）
	mode:'history',
	//编写路由规则
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			children:[ //用于配置子路由规则
				{
					name:'xiaoxi',
					path:'message', //此处不要加 斜杠（/）
					component:Message,
					children:[
						{
							name:'xiangqing',
							// path:'detail/:id/:title/:content', //params参数需要用占位符声明接收
							path:'detail', //query参数无需占位符
							component:Detail,

							//第一种写法：props的值为对象，该对象中所有的key-value最终都会通过props传给Detail
							// props:{a:300,b:400,c:500}

							//第二种写法：props的值为布尔值，若值为true，则会把该路由所有的params参数，转为props传给Detail
							// props:true

							//第三种写法：props的值为函数，该函数返回的这个对象中的每一组key-value最终都会通过props传给Detail
							props($route){
								// console.log('###',$route)
								return {...$route.query,school:'尚硅谷'}
							}
						}
					]
				},
				{
					name:'xinwen',
					path:'news',
					component:News
				},
			]
		}
	]
})

//暴露router
export default router


